<template>
  <div class="director-item">
    <el-avatar shape="square" fit="cover" :size="70" :src="avatar"></el-avatar>
    <div>
      <span>{{ name }}</span>
    </div>
    <!-- 添加删除图标 添加删除演员的功能 -->
    <i class="el-icon-error" @click="deleteDirector"></i>
  </div>
</template>

<script>
export default {
  props: ["id", "name", "avatar"],
  data() {
    return {};
  },
  methods: {
    deleteDirector() {
      this.$confirm("此操作将永久删除演员,是否继续", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http.DirectorApi.delete({ id: this.id }).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: "删除成功！",
            });
            this.$emit("deleteDirSucess");
            
          }
        });
      });
    },
  },
};
</script>

<style scoped>
.director-item {
  display: inline-block;
  margin: 20px 20px 0px 0px;
  text-align: center;
  position: relative;
}
.director-item > div > span {
  font-size: 0.9em;
}
.director-item i {
  position: absolute;
  display: none;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  cursor: pointer;
}
.director-item:hover i {
  display: block;
}
.el-avatar >>> img {
  width: 100%;
}
</style>
